<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>扫码拣货 - [[${T(com.b2c.erp.DataConfigObject).getInstance().getSysName()}]]</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    <style>
        .quantity {
            border: 1px solid #787878;
        }
        .red{
            border: 1px solid #ff0000;

        }
        .sel {
            background-color: #00FF00;
        }

    </style>
    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <fieldset class="layui-elem-field">
        <legend>扫码操作</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" >
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <input type="text" id="num" name="num" placeholder="商品SKU编码" class="layui-input" style="width: 260px;">
                    </div>


                    <div class="layui-inline">
                        <button lay-submit="" class="layui-btn layui-btn-primary layui-btn-xs" lay-filter="scanCode">查询</button>
                        <i>需拣货：<span id="totalCount">0</span>&nbsp;件</i>
                        <i>已拣货：<span id="successCount" style="color: red">0</span>&nbsp;</i>
                    </div>
                    <div class="layui-inline">

                        <p>
                            <a href="javascript:;" class="layui-btn" id="s-define" th:if="${pick.status == 1}">确认拣货</a>
                            <span id="s-define_" style="display: none;" class="update"><i></i>处理中</span>
                        </p>

                    </div>

                </div>
            </form>



        </div>
    </fieldset>
    <div class="sp-wrapper">
        <h2 class="sp-title"><span>待拣货商品列表(<span th:text="${goods.size()}"></span>)</span></h2>

        <div class="sp-table">
            <form id="form1" method="post" >
                <input type="hidden" name="stockOutFormId"  th:value="${pick.id}" />
            <table id="data-list">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>商品</th>
                    <th>规格</th>
                    <th>SKU</th>
                    <th>需拣货数量</th>
                    <th>拣货仓位</th>

                    <th>已拣货</th>
                </tr>
                </thead>
                <tbody id="r-list">
                <tr th:each="item:${goods}">
                    <td th:text="${itemStat.index+1}"></td>
                    <td>
                        <img th:src="${item.colorImage}" style="width: 50px;height: 50px;" />
                    </td>
                    <td style="text-align: left">
                        <b th:text="${item.colorValue}"></b><b th:text="${item.sizeValue}"></b><b th:text="${item.styleValue}"></b>
                    </td>
                    <td style="text-align: left" th:text="${item.skuNumber}"></td>
                    <td th:text="${item.quantity}">2</td>
                    <td style="text-align: left">

                        <input type="hidden" name="goodsId" th:value="${item.goodsId}" />
                        <input type="hidden" name="orderItemId" th:value="${item.orderItemId}" />
                        <input type="hidden" name="skuId" th:value="${item.specId}" />
                        <input type="hidden" name="specNumber" th:value="${item.skuNumber}" />
                        <input type="hidden" name="quantity" th:value="${item.quantity}" />
                        <select name="shelfId" style="width: 260px;">
                            <option th:each="it:${item.stocks}" selected th:value="${it.locationId}"
                                    th:text="${it.locationName+'-当前库存：'+ it.currentQty + '锁定库存：'+ it.lockedQty }"></option>
                        </select>
                    </td>
                    <td>
                        <input type="number" name="currQty" class="quantity" th:if="${item.status == 1 || item.status == 0 }" th:classappend="${item.skuNumber}"  readonly autocomplete="off" placeholder="拣货数量" th:attr="maxQty=${item.quantity}" value="0" />
                        <span th:if="${item.status == 2 || item.status == 3}" th:text="${item.quantity}"></span>
                    </td>

                </tr>

                </tbody>
            </table>
            </form>
            <div class="pages">

            </div>
        </div>
    </div>


    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>

    <!-- end sp-wrapper -->
    <script>
        var cookieName = "picking[[${pick.id}]]";
        // var specArr = [];
        var spec_arr =[];
        var jsonObj = [];
        layui.use(['laydate', 'layer','form'], function () {
            var laydate = layui.laydate;
            var layer = layui.layer;
            var form = layui.form;

            form.on('submit(scanCode)', function (obj) {
                var num = $("#num").val();
                $("#num").val('');
                $("#num").focus();
                if(num == "" ) {
                    alert("请输入商品SKU编码")
                    return false;
                }
                //判断是否存在

                // $("input[name='specNumber']").each(function(){
                //     spec_arr.push($(this).val().toUpperCase());
                //     var json = {"name":$(this).val().toUpperCase(),"value":0}
                //     jsonObj.push(json)
                // })

                if(spec_arr.indexOf(num.toUpperCase()) < 0){
                    alert("SKU:"+num+"不在该拣货单中");
                    return false;
                }
                var obj = $("."+num.toUpperCase());

                if(obj.is(":empty") == false) {
                    obj = $("."+num.toLowerCase());
                }

                if(obj.is(":empty") == false) {return false;}

                var h = $(obj).val();
                h++;
                var maxQty = $(obj).attr("maxQty");

                if(parseInt(h) > parseInt(maxQty)){
                    alert('已经超过最大数量');
                    return false;
                }

                $(obj).val(h);
                //处理cookie

                // if(specArr.indexOf(num.toUpperCase()) < 0){
                //     specArr.push(num.toUpperCase())
                // }
                $.each(jsonObj,function (i,n) {
                    if(n.name === num){
                        n.value = h;
                    }
                })
                // var de=Enumerable.From(jsonObj).Where("x=>x.name=='"+num+"'").ToArray();
                // if(de!=null && de[0]!=null){
                //     console.log(de[0].value);
                // }


                // var isExist = jsonObj.hasOwnProperty(num);
                // alert(isExist)
                // if(isExist == false){
                //
                //     jsonObj.push({num:h});
                // }else{
                //     jsonObj[num]=h;
                // }
                // alert(JSON.stringify(jsonObj))
                var successCount = $("#successCount").text();
                $("#successCount").text(parseInt(successCount) + 1);


                $(obj).addClass("red");
                $(obj).parent().parent().addClass("sel");
                setTimeout(function(){
                    $(obj).removeClass("red");
                    $(obj).parent().parent().removeClass("sel");
                },1000);

                //排到第一位
                $(obj).parent().parent().prependTo($("#data-list"));


                return false;//false：阻止表单跳转  true：表单跳转
            });



            $(function () {

                $("#num").focus();
                var totalCount = 0;
                $("input[name='quantity']").each(function () {
                    var qty = parseInt($(this).val());
                    totalCount += qty;
                })
                $("#totalCount").text(totalCount);

                $("input[name='specNumber']").each(function(){
                    spec_arr.push($(this).val().toUpperCase());
                    var json = {"name":$(this).val().toUpperCase(),"value":0}
                    jsonObj.push(json)
                })
                // $.cookie(cookieName,'[{key:"HY21WZ40591500",value:1}]');
                var cv = $.cookie(cookieName);
                // alert(cv);
                if(cv != undefined && cv != 'null') {
                    var jv = eval('(' + cv + ')');
                    $.each(jv, function (i, n) {
                        var num = n.name
                        var obj = $("." + num.toUpperCase());

                        if (obj.is(":empty") == false) {
                            obj = $("." + num.toLowerCase());
                        }
                        $(obj).val(n.value);
                    });
                }

                $("#s-define").click(function () {
                    //弹出
                    var number = $("#pickNumber").val();
                    $("#s-define").hide();
                    $("#s-define_").show();
                    //保存jsonObj
                    $.cookie(cookieName,JSON.stringify(jsonObj));

                    if(confirm("请核对拣货数据，是否确认拣货")) {
                        //AJAX更新成已拣货
                        $.ajax({
                            url: "/ajax_stock_out/complete_picking",
                            type: "POST",
                            dataType: "json",
                            // contentType: "application/json",
                            // data: JSON.stringify({key: number}),
                            data: $('#form1').serialize(),
                            success: function (res) {
                                // console.log(res);
                                if (res.code == 0) {
                                    alert("拣货完成");
                                    $.cookie(cookieName, null);
                                    // parent.layer.close(index);
                                    parent.location.reload();
                                } else {
                                    // $.cookie(cookieName, null);
                                    $("#s-define").show();
                                    $("#s-define_").hide();
                                    alert(res.msg);
                                }

                            },
                            complete: function(XMLHttpRequest){
                                if (XMLHttpRequest.getResponseHeader("REDIRECT")=="NO_ACCESS")alert("无权限访问");
                            },
                        });
                    }else{
                        $("#s-define").show();
                        $("#s-define_").hide();
                    }
                })
            });
        })

    </script>
</div>
</body>
<html>
